<template>
    <Teleport to=".sdy-hander">
        <van-nav-bar  :title="title"  :left-arrow="back">
        <template #right>
           <slot name="right"></slot>
        </template>
        <template #title>
           <slot name="title">{{title}}</slot>
        </template>
        <template #left>
           <slot name="left">
            <van-icon name="arrow-left" class="back-btn"/>
           </slot>
        </template>
    </van-nav-bar>
    </Teleport>
</template> 
<script setup lang="ts">
import { defineProps,Teleport } from "vue";
interface MyTopBar{
    title:string,
    back?:boolean
}
//接收父组件传递的数据
defineProps<MyTopBar>()
</script>
<style scoped lang="scss">
@import '@/styles/variable.scss';
//覆盖样式
:deep(.van-nav-bar__content ){
     background-color: $globalColor;
}
.back-btn{
    font-size: 24px;
    color: black !important;
}
</style>